<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body {
            display: flex;
            flex-direction: column;
        }

        #header {
            height: .4rem;
            background-color: red;
        }

        #header .headerbox {
            text-align: center;
            font-size: 0.2rem;
        }

        #header .headerbox a {
            font-size: .2rem;
            color: #333333;
            float: left;
        }

        #content {
            flex: 1;
            overflow-y: auto;
        }

        #content .content-box {
            width: 4.14rem;
            height: 3.5rem;
            display: flex;
            flex-wrap: wrap;
        }

        #content .content-box>div {
            width: 1.93rem;
            height: 3.5rem;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        #content .content-box>div>div:nth-of-type(1) {
            width: 1.93rem;
            height: 2.6rem;
        }

        #content .content-box>div>div:nth-of-type(1) img {
            width: 1.91rem;
            height: 2.6rem;
        }

        #content .content-box>div>div:nth-of-type(2) {
            flex: 1;
        }

        /* #content .content-box>div>div:nth-of-type(2){
            display: flex;
            flex-direction: column;
        } */
        #content .content-box>div>div:nth-of-type(2) a>div:nth-of-type(1) {
            font-size: 0.16rem;
            color: #999999;
            text-align: left;
        }

        #content .content-box>div>div:nth-of-type(2) a>div:nth-of-type(2) {
            font-size: 0.22rem;
            color: red;
            text-align: left;
        }

        #content .content-box>div>div:nth-of-type(2) a>input {
            position: absolute;
            bottom: 0;
            width: .8rem;
            height: .3rem;
        }

        #content .content-box>div>div:nth-of-type(2)>input {
            position: absolute;
            bottom: 0;
            width: .8rem;
            height: .3rem;
            margin-left: 1rem;
        }

        #footer {
            height: .5rem;
        }

        #footer .footer-box {
            height: .5rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        #footer .footer-box a {
            display: block;
            font-size: .2rem;
            color: #999999;
        }
    </style>
</head>
<script src="./js/tools.js"></script>
<body>
    <!-- header 开头 -->
    <div id="header">
        <div class="headerbox tou">
            <a href="./search.html">&lt;</a>
            搜索结果页面
        </div>
    </div>
    <!-- header end -->
    <!-- content start 内容-->
    <div id="content">
        <div class="content-box">
            <!-- <div>
                <div><a href=""><img src="http://localhost/image/content/content1.jpg" alt=""></a></div>
                <div>
                    <a href="">
                        <div>漂亮的上衣</div>
                        <div>￥66</div>
                        <input type="button" value="立即购买">
                    </a>
                    <input type="button" value="收藏">
                </div>
            </div>
            <div>
                <div><a href=""><img src="http://localhost/image/content/content2.jpg" alt=""></a></div>
                <div>
                    <a href="">
                        <div>好看的裤子</div>
                        <div>￥88</div>
                        <input type="button" value="立即购买">
                    </a>
                    <input type="button" value="收藏">
                </div>
            </div>
            <div>
                <div><a href=""><img src="http://localhost/image/content/content3.jpg" alt=""></a></div>
                <div>
                    <a href="">
                        <div>好用的护肤品</div>
                        <div>￥69</div>
                        <input type="button" value="立即购买">
                    </a>
                    <input type="button" value="收藏">
                </div>
            </div>
            <div>
                <div><a href=""><img src="http://localhost/image/content/content4.jpg" alt=""></a></div>
                <div>
                    <a href="">
                        <div>靴子鞋子</div>
                        <div>￥100</div>
                        <input type="button" value="立即购买">
                    </a>
                    <input type="button" value="收藏">
                </div>
            </div>
            <div>
                <div><a href=""><img src="http://localhost/image/content/content5.jpg" alt=""></a></div>
                <div>
                    <a href="">
                        <div>喝的</div>
                        <div>￥6</div>
                        <input type="button" value="立即购买">
                    </a>
                    <input type="button" value="收藏">
                </div>
            </div>
            <div>
                <div><a href=""><img src="http://localhost/image/content/content1.jpg" alt=""></a></div>
                <div>
                    <a href="">
                        <div>吃的</div>
                        <div>￥3</div>
                        <input type="button" value="立即购买">
                    </a>
                    <input type="button" value="收藏">
                </div>
            </div> -->
        </div>
    </div>
    <!-- content end -->
    <!-- footer 开头-->
    <div id="footer">
        <div class="footer-box dibu">
            <a href="./index.html">首页</a>
            <a href="./rdian.html">热点</a>
            <a href="./shopping.html">购物车</a>
            <a href="./scang.html">收藏</a>
            <a href="./mycenter.html">我的</a>
        </div>
    </div>
    <!-- footer end -->
</body>
<script src="./js/ssresult.js"></script>
</html>